import { View, Text, StatusBar } from 'react-native'
import React, { createContext, useEffect, useState } from 'react'
import { Link } from 'expo-router'
import { mallIndex } from '../../service'
import { zhThemeColor } from '../../global'
import ZhSwiper from '../../components/ZhSwiper'
import ZhTabs from '../../components/ZhTabs'

// 步骤1：创建上下文对象，并导出，供子孙组件使用
// export const GoodsTypesCtx = createContext()
// 使用中间模块来代替
import { GoodsTypesCtx } from '../../ctx' 

export default function list() {
  // 状态变量，保存用户数据
  const [userInfo, setUserInfo] = useState({})
  // 状态变量，保存轮播图数据
  const [carousels, setCarousels] = useState([])
  // 状态变量，保存商品列表列表
  const [goodsTypes, setGoodsTypes] = useState([])
  // 当页面挂载后，发送请求 
  useEffect(()=>{
    // 匿名函数自调用
    ;(async function() {
      const data = await mallIndex()
      // console.log(data.goodsTypes)
      // 将数据存储到状态变量
      setUserInfo(data.userInfo)    //用户
      setCarousels(data.carousels)   // 轮播图
      setGoodsTypes(data.goodsTypes)  //商品类别
    })()
  },[])
  return (
    <View style={{height: '100%'}}>
      {/* F1: 状态栏 */}
      <StatusBar backgroundColor={zhThemeColor} barStyle="light-content" />
      {/* F2: 导航栏，由_layout.js设置完成 */}
      {/* F3: 轮播广告 */}
      <ZhSwiper list={carousels} />
      {/* F4: 商品主体标签页 */}
      {/* 步骤2：在上下文对象中提供数据 
        value: 要提供的数据
      */}
      <GoodsTypesCtx.Provider value={goodsTypes}>
        {/* 提供的组件 */}
        <ZhTabs />
      </GoodsTypesCtx.Provider>
    </View>
  )
}